<template>
  <view class="login content">
    <view class="title">
      <text>登录</text>
    </view>
    <view class="login-contain">
      <uni-forms ref="form" :modelValue="state.formData" :rules="state.rules">
        <uni-forms-item required label="账号" name="username">
          <uni-easyinput v-model="state.formData.username" type="text" placeholder="账号名称" />
        </uni-forms-item>
        <uni-forms-item required label="密码" name="password">
          <uni-easyinput v-model="state.formData.password" type="password" placeholder="密码" />
        </uni-forms-item>
        <button @click="login" type='primary'>登录</button>
      </uni-forms> 
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useUserInfo } from '@/stores/userInfo';

const state = reactive({
  formData: {
    username:'admin',
    password: '123456'
  },
  rules: []
})

async function login() {
  const userInfo = useUserInfo()
  await userInfo.login(state.formData)
  await userInfo.setUserInfos()
  uni.navigateTo({
    url: '/pages/index/index'
  })
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    font-size: 40rpx;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
  }

  .login-contain {
    width: 600rpx; 
  }
}
</style>